﻿<%@page import="com.youu.youu.manager.bean.TUser"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 -->
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
    <!-- Basic Page Needs
    ================================================== -->
    
    <title>YOUU友游网个人主页</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="author" content="nurealam sabbir"/>

    <!-- Mobile Specific Metas 
  ================================================== -->
    <meta content="width=device-width,initial-scale=1" name="viewport"/>

    <!-- Favicons
    ================================================== -->
    <link rel="shortcut icon" href="${ctp}/assets/img/youu16.png" type="image/x-icon"/>
    <link rel="apple-touch-icon" href="${ctp}/assets/img/youu57.png"/>
    <link rel="apple-touch-icon" sizes="72x72" href="${ctp}/assets/img/youu72.png"/>
    <link rel="apple-touch-icon" sizes="114x114" href="${ctp}/assets/img/youu114.png"/>

    <!--fonts
    ====================================================-->
    <link type="text/css" href="${ctp}/assets/css/familyOpenSans.css" rel="stylesheet"/>
    <!--stylesheets
    ====================================================-->
    <!-- 
    	<link rel="stylesheet" type="text/css" href="${ctp}/assets/css/bootstrap.min.css"/>
     -->
    <link rel="stylesheet" type="text/css" href="${ctp}/assets/vendor/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${ctp}/assets/css/font-awesome.min.css"/> 
    <link rel="stylesheet" type="text/css" href="${ctp}/assets/css/userMainStyle.css"/>
    <link rel="stylesheet" type="text/css" href="${ctp}/assets/css/simpletextrotator.css"/> 
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]--> 
    <!-- 
    	<script src="${ctp}/assets/vendor/jQuery/jquery-3.2.1.min.js"></script>  --><!-- JQUERY -->
    
    <script src="${ctp}/assets/vendor/jQuery/jquery-2.1.1.min.js"></script> <!-- JQUERY -->
    <script type="text/javascript" src="${ctp}/assets/js/jquery.timers-1.1.2.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctp}/assets/vendor/layer/layer.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctp}/assets/vendor/layui/layui.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctp}/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctp}/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="${ctp}/ueditor/lang/zh-cn/zh-cn.js"></script>

</head>
<body>

    <!--FRONT PAGE/ SPLASH SCREEN SECTION-->

    <div class="loading-screen"></div>

	<div  style="margin-left:20px;float: left;">
       <h1>
           <a href="index.jsp" title="Rooky">
           <img src="${ctp}/assets/img/youuIndexBlack.png" alt="Rooky" title="Rooky"  style="z-index: 9999;position: absolute;"/></a>
           	
       </h1>
	</div>
    <div id="frontpage"> 
        <div class="shadow-img"></div> 
        <img src="${ctp}/assets/img/front-image.jpg" class="front-img img-responsive" alt ="Front-image"><!--IMAGE FOR FRONT SCREEN-->
        <h1>${tUser.loginacct}<span class="invert"></span></h1><!--PROFILE NAME-->
        <h3 class="invert" style="margin-top: -10px; margin-bottom: 10px;">Youu<span class="rotate">足迹, 博文, 门票, 优惠券, 通知</span></h3> <!--SUBTITLE IN PROFILE-->
        <div class="frontclick"><img src="${ctp}/assets/img/click.png" alt="" class="img-responsive"><span class="pulse"></span></div>
    </div>
    <!--FRONT PAGE/ SPLASH SCREEN SECTION ENDS-->
    <!--container-->
    <div class="container">
        <div id="content" class="row hidden">
            <div class="col-sm-4">
                <!--namecard-->
                <div id="namecard" class="namecard">
                    <div class="shadow-img"></div>
                    <h1 class="maintitle">${tUser.loginacct}<span class="invert"></span></h1><!--PROFILE NAME-->
                    <h3 class="invert sub-maintitle">Youu 
                        <span class="rotate">足迹, 博文, 门票, 优惠券, 通知</span><!--SUBTITLE AFTET NAME-->
                    </h3>
                    <c:if test="${not empty tUser.gender }">
                    	<c:if test="${tUser.gender < 1 }">
	                    <img id="profile-img" class="profile-img transparent" src="${ctp}/assets/img/xiaojiejie.png" alt="${ctp}/assets/img/profile-thum.png"/><!--PROFILE -->
	                    </c:if>
	                    <c:if test="${tUser.gender >= 1 }">
	                    <img id="profile-img" class="profile-img transparent" src="${ctp}/assets/img/xiaogege.png" alt="${ctp}/assets/img/profile-thum.png"/><!--PROFILE -->
	                    </c:if>
                    </c:if>
                    <c:if test="${empty tUser.gender }">
                    <img id="profile-img" class="profile-img transparent" src="${ctp}/assets/img/profile-thum.png" alt="${ctp}/assets/img/profile-thum.png"/><!--PROFILE -->
                    </c:if>
                </div><!--/#namecard-->
                <!--menu-->
                <div id="menu-container">
                    <!--PAGE MENU-->
                    <ul class="nav-menu no-padding">
                        <li class="nav-btn selected getMapWidth" title="Home" data-page="home">
                            <div class="hover-background"></div>
                            <span>个人主页</span><i class="fa fa-user fa-fw"></i>
                        </li>
                        <li class="nav-btn getMapWidth" id="resume-btn" title="Resume"  data-page="resume">
                            <div class="hover-background"></div>
                            <span>我的足迹</span><i class="fa fa-file-text fa-fw"></i>
                        </li>
                       <li class="nav-btn folio-btn getMapWidth" data-filter="*" title="Portfolio" data-page="portfolio">
                            <div class="hover-background"></div>
                            <span>发布博文</span><i class="fa fa-suitcase fa-fw"></i>
                        </li>
                        <li class="nav-btn getMapWidth" title="Contact" id="contact-link" data-page="contact">
                            <div class="hover-background"></div>
                            <span id="msgCount-span" style="background: rgba(255,0,0,0.7);width: 18px;"  class="badge"></span>
                            <span>消息通知</span><i class="fa fa-paper-plane fa-fw"></i>
                        </li>
                        <li class="nav-btn folio-btn getMapWidth" data-filter="*" title="tacket" data-page="tacket">
                            <div class="hover-background"></div>
                            <span>我的门票</span><i class="fa fa-suitcase fa-fw"></i>
                        </li>

                    </ul><!--/.nav-menu __PAGE MENU ENDS-->

                    <!--SOCIAL NAV MENU-->
                    <div class="social-menu-container">
                        <ul class="social-menu no-padding">                     
<!--                             <li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li> -->
<!--                             <li><a href="javascript:;"><i class="fa fa-google-plus"></i></a></li> -->
<!--                             <li><a href="javascript:;" target="_blank"><i class="fa fa-leaf"></i></a></li> -->
<!--                             <li><a href="javascript:;"><i class="fa fa-pinterest-p"></i></a></li> -->
<!--                             <li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li> -->
                            
                       		<li><a href="logOut"><i class="glyphicon glyphicon-log-out"></i></a></li>
                        </ul>
                    </div><!--/.social-menu-container-->
                </div><!--#menu-container-->
            </div>
            <div class="col-sm-8 page-segment">
                <ul class="page-container no-padding">
                    <!--HOME/PROFILE PAGE-->
                    <li id="home" class="selected">
                        <div class="title-container hidden">
                            <div id="first-shadow-img" class="shadow-img"></div> 
                            <h2 class="rotate-out">欢迎来到Youu <span class="invert">个人中心</span></h2><!--HOME TITLE-->                          
                        </div>
                        <div class="description hidden">
                            <div class="watermark-home"></div> 

                            <div id="toFindUserGender" class="fade-text transparent">
                                <!--DESCRIPTION ON HOME-->
                                <div id="userGenderDiv" class="strong-text">
                                	<c:if test="${empty tUser.gender }">
                                	请告诉youu您的性别:<a href="#"><img id="userGenderBoy" class="userChooseGender" src="${ctp }/assets/img/genderboy64.png" style="margin-right: 5px;margin-left: 5px;"/></a>
                                					  <a href="#"><img id="userGenderGirl" class="userChooseGender"  src="${ctp }/assets/img/gendergirl64.png"></a>
                                	<div class="focus-text" style="font-size: 18px;">特别提醒: 性别只能选择一次哦! 请慎重考虑~</div>
                                	</c:if>
                                	<c:if test="${not empty tUser.gender }">
                                		<c:if test="${tUser.gender == 1 }">
                                		恭迎主上 <img class="youusun" src='${ctp}/assets/img/welcome.gif' style='width:60px;height:60px;'/>
                                		</c:if>
                                		<c:if test="${tUser.gender == 0 }">
                                		恭迎小主 <img class="youusun" src='${ctp}/assets/img/welcome.gif' style='width:60px;height:60px;'/>	
                                		</c:if>
                                	</c:if>
                                </div>
                                
                                <p class="large-paragraph">个性签名:</p>         
                                <!--DESCRIPTION ON HOME ENDS-->
                            </div>

                            <!--ALL PERSONAL DETAILS-->
                            <h3 class="personal-info-title title" style="margin-top: 36px;">基本信息</h3>
                            <ul class="personal-info">
                                <li class="rotate-out rotated"><label>昵称</label><span> ${tUser.loginacct}</span></li>                     
                                <li class="rotate-out rotated"><label>账户名</label><span> ${tUser.loginacct}</span></li>
                                <li class="rotate-out rotated"><label>邮箱</label><span> ${tUser.email}</span></li>  
                                <li class="rotate-out rotated"><label>电话</label><span>${tUser.phoneNum}</span></li>
                                <li class="rotate-out rotated"><label>积分</label><span>${tUser.level}</span></li>
                                <li class="rotate-out rotated"><label>会员等级</label>
                                	<c:if test="${tUser.level > 10000 }"><span id="blink" style="background-color: rgba(230,230,230,0.2);font-weight:bold;">VIP10</span></c:if>
                                	<c:if test="${tUser.level <= 10000 }"><span style="color:black;background-color: rgba(230,230,230,0.2);font-weight:bold;">VIP0</span></c:if>
                                </li>
                            </ul><!--/ul.personal-info-->
                           
                        </div>
                    </li><!--/#home-->

                    <%--用于书写博文（上）--%>
                    <li id="portfolio" class="hidden">
                        <div class="title-container">
                            <div class="shadow-img"></div>
                            <h2 class="rotate-out rotated"><span class="invert">博文</span></h2> <!--PORTFOLIO TITLE-->
                        </div>
                        <div class="description">

                            <div class="tabs tabs_animate" >
                                <!--RESUME TAB LISTS-->
                                <ul class="horizontal no-padding">
                                    <li><a href="#tab-01" class="icon-bg icon-skills"><div>全部博客</div></a></li>
                                    <li><a id="myBlog" href="#tab-02" class="icon-bg icon-education"><div>我的博客</div></a></li>
                                    <li><a id="editBlog" href="javascript:void(0);" class="icon-bg icon-employment "><div>编辑博文</div></a></li>
                                </ul>
                                <div id="tab-01">
                                <h3 class="title">EMPLOYMENT</h3>

                                </div>
                                <div id="tab-02">
                                    <ul id="blogPage" style="margin-top: 0px;">

                                    </ul>
                                    <ul id="blogList" class="employment-class tab-cont">

                                    </ul>

                                </div>
                            </div>
                        </div>
                    </li>
                    <%--用于书写博文（下）--%>
                    <!--RESUME PAGE-->
                    <li id="resume" class="hidden">
                        <div class="title-container">
                            <div class="shadow-img"></div>
                            <h2 class="rotate-out rotated"><span class="invert">我的足迹</span></h2> <!--RESUME TITLE-->
                        </div>
                        <div class="description">

                            <div class="tabs tabs_animate" >
                                <!--RESUME TAB LISTS-->
                                <ul class="horizontal no-padding">
                                    <li><a href="#tab-1" class="icon-bg icon-skills"><div>中国足迹</div></a></li>
                                    <li><a href="#tab-2" class="icon-bg icon-education"><div>世界足迹</div></a></li>
                                    <li><a href="#tab-3" class="icon-bg icon-employment"><div>3D世界(待开放)</div></a></li>
                                </ul><!--RESUME TAB LISTS ENDS-->

                                <!--RESUME FIRST TAB/SKILL TAB DETAILS-->
                                <div id="tab-1">
									<!-- -----------------------这里是中国地图!!!我的足迹!!!!!!------------------------ -->
                                    <div id="myChart" class="circle-skill-container" style="height: 360px;min-width:300px;max-width:500px;">
                                        
                                    </div><!--SKILLS WITH CIRCLE DISPLAY ENDS-->
                                    
                                </div><!--RESUME FIRST TAB/SKILL TAB DETAILS ENDS-->
                                	
                                <!--RESUME SECOND TAB/EDUCATION TAB DETAILS-->
                                <div id="tab-2">
                                    <h3 class="title">EDUCATIONS</h3>
                                    <ul class="education-class">
                                        <li>
                                            <!--EDUCATION LIST ITEM-->
                                            <h4 class="title">MSc in Computer Sciene<i class="fa fa-sort-desc pull-right"></i></h4>
                                            <div class="list-content">
                                                <h5 class="title">Consectetur adipiscing <span class="list-year">(2014 - 2005)</span></h5>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit. Vivamus sit</p><!--EDUCATION LIST DETAILS-->
                                            </div>
                                        </li>
                                        <li>
                                            <!--EDUCATION LIST ITEM-->
                                            <h4 class="title">Grad At Computer Engineering<i class="fa fa-sort-desc pull-right"></i></h4>
                                            <div class="list-content current">
                                                <h5 class="title">Consectetur adipiscing <span class="list-year">(2014 - 2005)</span></h5>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit. Vivamus sit</p><!--EDUCATION LIST DETAILS-->
                                            </div>
                                        </li>
                                        <li>
                                            <!--EDUCATION LIST ITEM-->
                                            <h4 class="title">College<i class="fa fa-sort-desc pull-right"></i></h4>
                                            <div class="list-content">
                                                <h5 class="title">Consectetur adipiscing <span class="list-year">(2014 - 2005)</span></h5>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit. Vivamus sit</p><!--EDUCATION LIST DETAILS-->
                                            </div>
                                        </li>
                                        <li>
                                            <!--EDUCATION LIST ITEM-->
                                            <h4 class="title">Schools<i class="fa fa-sort-desc pull-right"></i></h4>
                                            <div class="list-content">
                                                <h5 class="title">Consectetur adipiscing <span class="list-year">(2014 - 2005)</span></h5>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit. Vivamus sit</p><!--EDUCATION LIST DETAILS-->
                                            </div>
                                        </li>
                                    </ul>
                                </div><!--RESUME SECOND TAB/EDUCATION TAB DETAILS ENDS-->
                                <!--RESUME THIRD TAB/EMPLYMENT TAB DETAILS ENDS-->
                                <div id="tab-3">
                                    <h3 class="title">EMPLOYMENT</h3>
                                    <ul class="employment-class tab-cont">
                                        <li>
                                            <!--EMPLOYMENT INDIVIDUAL LIST-->
                                            <h4>Manager <span class="year">2014 - 2005</span></h4>
                                            <h5>Consectetur adipiscing</h5>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit.</p><!--EMPLOYMENT LIST DETAILS-->
                                        </li>
                                        <li>
                                            <!--EMPLOYMENT INDIVIDUAL LIST-->
                                            <h4>Manager <span class="year">2014 - 2005</span></h4>
                                            <h5>Consectetur adipiscing</h5>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit.</p><!--EMPLOYMENT LIST DETAILS-->
                                        </li>
                                        <li>
                                            <!--EMPLOYMENT INDIVIDUAL LIST-->
                                            <h4>Manager <span class="year">2014 - 2005</span></h4>
                                            <h5>Consectetur adipiscing</h5>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing Vivamus sit Vivamus sit. Vivamus sit.. consectetur adipiscing Vivamus sit.</p><!--EMPLOYMENT LIST DETAILS-->
                                        </li>
                                    </ul>
                                </div><!--RESUME THIRD TAB/EMPLYMENT TAB DETAILS ENDS-->
                            </div>
                        </div>
                    </li>
                    <!--/#resume-->
                    
                    <!--/#resume-->
                    <!--！！！！！！！！！！！！！！！！！！！！！门票!!!!!门票！！！!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
                    <li id="tacket" class="hidden">
                        <div class="title-container">
                            <div class="shadow-img"></div>
                            <h2 class="rotate-out rotated"><span class="invert">门票/优惠券</span></h2> <!--PORTFOLIO TITLE-->                         
                        </div>

                        <!--PORTFOLIO CATEGORY LIST-->    
                        <div class="abs-child">
                            <ul class="button-group filters-button-group">
                                <li class="buttonTackets" data-filter=".photography">我的优惠券</li>
                                <li class="buttonTackets" data-filter=".commercial">我的门票</li>
                            </ul><!--/.button-group filters-button-group-->
                        </div>
                        
                        <div class ="sec-porfolio description"> 
                            <div class="row">
                                <!--PORTFOLIO ITEM CONTAINER-->
                                <div class="folio-container">
                                    <ul class="folio-item"><!--PORTFOLIO INDIVIDAUAL ITEM-->
                                        <li class="view view-first photography">  
                                            <img src="${ctp}/assets/img/folio/logs.jpg" alt="logs" /><!--PORTFOLIO INDIVIDAUAL ITEM IMAGE--> 
                                            <div class="mask">  
                                                 <h2>woodsman</h2> <!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->                               
                                                <!-- Button trigger modal -->
                                                <a role="button" class="info" data-toggle="modal" data-target="#myModal">Read More</a><!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
                                             </div>  
                                        </li>  
                                        <li class="view view-second commercial"><!--PORTFOLIO INDIVIDAUAL ITEM-->
                                          <img src="${ctp}/assets/img/folio/book.jpg" alt="book" /><!--PORTFOLIO INDIVIDAUAL ITEM IMAGE--> 
                                            <div class="mask"></div>
                                            <div class="content">
                                                <h2>Hover Style #2</h2><!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->                                  
                                                <a role="button" class="info" data-toggle="modal" data-target="#myModal2">Read More</a><!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
                                            </div>
                                        </li>
                                        <li class="view view-tenth photography"> <!--PORTFOLIO INDIVIDAUAL ITEM--> 
                                             <img src="${ctp}/assets/img/folio/beach.jpg" alt="beach" /> <!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->  
                                             <div class="mask">  
                                                 <h2>New York</h2><!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->                                    
                                                 <a role="button" class="info" data-toggle="modal" data-target="#myModal5">Read More</a>  <!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
                                             </div>  
                                        </li>                         
                                        <li class="view view-second commercial"><!--PORTFOLIO INDIVIDAUAL ITEM-->
                                          <img src="${ctp}/assets/img/folio/guy.jpg" alt="guy" /><!--PORTFOLIO INDIVIDAUAL ITEM IMAGE--> 
                                            <div class="mask"></div>
                                            <div class="content">
                                                <h2>Image Name</h2><!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->                                 
                                                <a role="button" class="info" data-toggle="modal" data-target="#myModal3">Read More</a><!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
                                            </div>
                                        </li> 
                                                            
                                        <li class="view view-first potrait"><!--PORTFOLIO INDIVIDAUAL ITEM-->  
                                             <img src="${ctp}/assets/img/folio/illustration.jpg" alt="illustration" /><!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->   
                                             <div class="mask">  
                                                 <h2>New York</h2>                                   
                                                 <a role="button" class="info" data-toggle="modal" data-target="#myModal4">Read More</a> <!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'--> 
                                             </div>  
                                        </li>                         
                                        <li class="view view-second photography"><!--PORTFOLIO INDIVIDAUAL ITEM-->
                                          <img src="${ctp}/assets/img/folio/guy.jpg" alt="guy" /><!--PORTFOLIO INDIVIDAUAL ITEM IMAGE--> 
                                            <div class="mask"></div>
                                            <div class="content">
                                                <h2>Image Name</h2><!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->                                 
                                                <a role="button" class="info" data-toggle="modal" data-target="#myModal3">Read More</a><!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
                                            </div>
                                        </li> 
                                        <li class="view view-tenth potrait"> <!--PORTFOLIO INDIVIDAUAL ITEM--> 
                                            <img src="${ctp}/assets/img/folio/logs.jpg" alt="logs" /> <!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->  
                                            <div class="mask">  
                                                 <h2>woodsman</h2><!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->                            
                                                 <a role="button" class="info" data-toggle="modal" data-target="#myModal">Read More</a> <!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'--> 
                                             </div>  
                                        </li>   
                                        
                                        <li class="view view-tenth commercial"><!--PORTFOLIO INDIVIDAUAL ITEM-->  
                                             <img src="${ctp}/assets/img/folio/beach.jpg" alt="beach" /> <!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->  
                                             <div class="mask">  
                                                 <h2>New York</h2><!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->                                    
                                                 <a role="button" class="info" data-toggle="modal" data-target="#myModal5">Read More</a> <!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'--> 
                                             </div>  
                                        </li>             
                                                                                                
                                                  
                                    </ul>
                                </div>
                                <!--PORTFOLIO ITEM CONTAINER ENDS-->
                            </div>                          
                        </div>
                    </li><!--/#portfolio-->

                    <!--CONTACT PAGE-->
                    <li id="contact" class="hidden">
                        <div class="title-container" >
                            <div class="shadow-img"></div>               
                           <h2 class="rotate-out rotated"><span class="invert">消息通知</span></h2><!--CONTACT PAGE TITLE-->
                        </div>
                        <div class="description">                           
                            <div class="row">
                                <div class="col-sm-12">
                                <!-- 消息展示 -->
	                            <!--RESUME THIRD TAB/EMPLYMENT TAB DETAILS ENDS-->
	                            <div style="display: block;">
	                                <ul id="msg" class="employment-class msg-ul">
	                                    <div id="msg-div">
	                                    	<!-- 消息展示区 -->
	                                    </div>
	                                    <div id="loadDiv" align="center"></div>
	                                </ul>
	                            </div><!--RESUME THIRD TAB/EMPLYMENT TAB DETAILS ENDS-->
                                </div>                          
                                
                            </div>
                        </div>
                    </li><!--/#contact-->
                </ul> 

                <div class="row mobile-nav-container">
                    <!--SOCIAL NAV FOR MOBILE-->
                    <ul class="mobile-social no-padding">
                        <li>Connect With Me</li>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul><!--/.mobile-social-->
                </div>               
            </div><!--/.page-segment -->
            <!--  <h6 class="copyright-text">Copyright © 2015 Li Dada</h6> --> <!--if anyone wants copyright Texts--> 
        </div>
    </div><!--/.container -->
   
    <!--PORTFOLIO IMAGE MODAL LIST-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">

                    <%--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>--%>
                    <%--<form>--%>
                        <%--<i style="color: #00a2d4">博文标题：</i><input id="bolgTitle" type="text">--%>
                    <%--</form>--%>

                </div>
                <%--<div class="modal-body">--%>
                    <%--<form id="ueditorForm" action="/youu-restapi/blog/saveBlog" method="post" >--%>
                    <%--<script type="text/plain" id="editor" name="blogContent" style="width: 860px;height: 500px;"></script></form>--%>
                <%--</div>--%>
                <%--<div class="modal-footer">--%>
                        <%--<button id="saveBlog">提交</button>--%>
                <%--</div>--%>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">Hover Style</h4><!--PORTFOLIO IMAGE TITLE-->
                </div>
                <div class="modal-body">
                    <img src="${ctp}/assets/img/folio/book.jpg" class="img-responsive" alt="modal-image"><!--PORTFOLIO MODAL IMAGE-->
                </div>
                <div class="modal-footer">
                    <div class="mf-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sapiente, odit, illo saepe voluptate eos enim eius autem cumque ab, soluta dolor tempore inventore eligendi maxime voluptas pariatur explicabo blanditiis?</p>
                    </div>                      
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel3">Hover Style</h4><!--PORTFOLIO IMAGE TITLE-->
                </div>
                <div class="modal-body">
                    <img src="${ctp}/assets/img/folio/guy.jpg" class="img-responsive" alt="modal-image"><!--PORTFOLIO MODAL IMAGE-->
                </div>
                <div class="modal-footer">
                    <div class="mf-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione quae, alias at. Reprehenderit, ut quis corporis laudantium, laborum sed omnis qui perspiciatis explicabo. Ipsum culpa aspernatur dolorem. Amet, quis.</p>
                    </div>                      
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel4">Hover Style</h4><!--PORTFOLIO IMAGE TITLE-->
                </div>
                <div class="modal-body">
                    <img src="${ctp}/assets/img/folio/illustration.jpg" class="img-responsive" alt="modal-image"><!--PORTFOLIO MODAL IMAGE-->
                </div>
                <div class="modal-footer">
                    <div class="mf-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ab id unde veniam error et iste ut aspernatur accusantium porro molestiae voluptatibus rem, tempore inventore ad minus soluta praesentium magni?</p>
                    </div>                      
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel5" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel5">Hover Style</h4><!--PORTFOLIO IMAGE TITLE-->
                </div>
                <div class="modal-body">
                    <img src="${ctp}/assets/img/folio/beach.jpg" class="img-responsive" alt="modal-image"><!--PORTFOLIO MODAL IMAGE-->
                </div>
                <div class="modal-footer">
                    <div class="mf-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam amet placeat porro, maxime corrupti laboriosam, quod nulla perferendis esse ipsa atque deleniti. Magni molestias, nemo illum eos, exercitationem neque incidunt.</p>
                    </div>                      
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="subscribe_modal_1" tabindex="-1" role="dialog" aria-labelledby="subscribe_modal_1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title">Thank You</h2><!--PORTFOLIO IMAGE TITLE-->
                </div>
                <div class="modal-body">
                    <div class="text-center mail-sucsess"><h3> <span>your mail has been sent</span></h3></div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--javascript files
    =============================================================-->
    <script type="text/javascript" src="${ctp}/assets/js/jQueryTween-aio-min.js"></script> <!-- JQUERY Tween Plugin -->
    <script type="text/javascript" src="${ctp}/assets/js/jquery.tabslet.min.js"></script> <!-- JQUERY Tab plugin-->     
    <script type="text/javascript" src="${ctp}/assets/js/progressbar.min.js"></script> <!-- JQUERY Progressbar Plugin-->
    <script type="text/javascript" src="${ctp}/assets/js/jquery.simple-text-rotator.min.js"></script> <!-- JQUERY Text Rotator-->
    <script type="text/javascript" src="${ctp}/assets/vendor/bootstrap-3.3.7/js/bootstrap.min.js"></script> <!-- Bootstrap file-->
    <script type="text/javascript" src="${ctp}/assets/js/isotope.pkgd.min.js"></script> <!--SCRIPTS FOR PORTFOLIO IMAGE'S ANIMATION-->
    <script type="text/javascript" src="${ctp}/assets/js/customUserMain.js"></script>
    <script type="text/javascript" src="${ctp}/assets/vendor/echarts/echarts.js"></script>
	<script type="text/javascript" src="${ctp}/assets/vendor/echarts/china.js"></script>
	<!-- 引入工具方法js -->
    <script type="text/javascript" src="${ctp}/assets/js/util.js"></script>
    <script language="javascript">
		function changeColor(){
		var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
			color=color.split("|");
			document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)];
		}
		setInterval("changeColor()",200);
	</script>
    <script type="text/javascript">
    	$(function(){
    		
    		$(".userChooseGender").click(function(){
    			//用户点击性别图片
    			//alert($(this).attr("id"));
    			var usergender;
				var genderurl="/youu-restapi/usermain/userGender?gender=";
    			var genderImg="";
    			if($(this).attr("id")=="userGenderBoy"){
    				genderImg="<img src='${ctp}/assets/img/genderboy64.png'/>";
    				usergender=1;
    			}else if($(this).attr("id")=="userGenderGirl"){
    				genderImg="<img src='${ctp}/assets/img/gendergirl64.png'/>";
    				usergender=0;
    			}
    			layer.confirm("您选择的是 "+genderImg+" 哦!", {
  				  btn: ['选错啦!', '没错没错!'],
  				  btn2:function(){
  					  //发送ajax写入数据库
  					  genderurl=genderurl+usergender+"&uid="+${tUser.id};
  					  $.ajax({
  	    			  	  url:genderurl,
  	    				  success:function(data){
  	    					  if(data=="1"){
  	    						  //删除div块，重新添加
  	    						  //$("#userGenderDiv").html("恭迎主上 <img/ src='${ctp}/assets/img/welcome.gif' style='width:60px;height:60px;'/>");
  	    						  <%TUser tUser = (TUser)session.getAttribute("tUser");%>
  	    						  <%tUser.setGender(1);%>
  	    						  <%session.setAttribute("tUser", tUser);%>
  	    						  $("#userGenderDiv").remove();
  	    						  $("#toFindUserGender").prepend("<c:if test='${not empty tUser.gender }'><c:if test='${tUser.gender == 1 }'>恭迎主上 <img class='youusun' src='${ctp}/assets/img/welcome.gif' style='width:60px;height:60px;'/></c:if><c:if test='${tUser.gender == 0 }'>恭迎小主 <img class='youusun' src='${ctp}/assets/img/welcome.gif' style='width:60px;height:60px;'/></c:if></c:if>");
  	    						  $(".profile-img").attr("src","${ctp}/assets/img/xiaogege.png");
  	    					  }else if(data="0"){
	    						  //$("#userGenderDiv").html("恭迎小主 <img/ src='${ctp}/assets/img/welcome.gif' style='width:60px;height:60px;'/>");
  	    						  <%TUser tUser1 = (TUser)session.getAttribute("tUser");%>
	    						  <%tUser1.setGender(0);%>
	    						  <%session.setAttribute("tUser", tUser1);%>
	    						  $("#userGenderDiv").remove();
	    						  $("#toFindUserGender").prepend("<c:if test='${not empty tUser.gender }'><c:if test='${tUser.gender == 1 }'>恭迎主上 <img class='youusun' src='${ctp}/assets/img/welcome.gif' style='width:60px;height:60px;'/></c:if><c:if test='${tUser.gender == 0 }'>恭迎小主 <img class='youusun' src='${ctp}/assets/img/welcome.gif' style='width:60px;height:60px;'/></c:if></c:if>");
	    						  $(".profile-img").attr("src","${ctp}/assets/img/xiaojiejie.png");
  	    					  }
  	    					layer.closeAll('dialog');
  	    				  }
  	    			  });
  					  return false;
  				  }
  				});
    			
    		});
    		
    		$("body").on('click','.youusun',function(){
    			var num = Math.round(Math.random()*10);
    			switch(num){
    			case 0:
    				layer.alert("爱你哦!",{icon:6});
    				break;
    			case 1:
    				layer.alert("你好啊!",{icon:6});
    				break;
    			case 2:
    				layer.alert("哈哈哈!");
    				break;
    			case 3:
    				layer.alert("我是youu的小太阳!",{icon:6});
    				break;
    			case 4:
    				layer.alert("咦?",{icon:3});
    				break;
    			case 5:
    				layer.alert("怎么啦?",{icon:3});
    				break;
    			case 6:
    				layer.alert("阳光满满!正能量爆棚!");
    				break;
    			case 7:
    				layer.alert("好多足迹啊!",{icon:6});
    				break;
    			case 8:
    				layer.alert("世界那么大!",{icon:7});
    				break;
    			case 9:
    				layer.alert("去旅游吧!你带上钱,再带上我!",{icon:6});
    				break;
   				default:
   					layer.alert("好痒啊!",{icon:6});
   					break;
    			}
    		});
    		
          	//地图自适应太恶心，难解决，毕竟不是前端工程师
    		var mapFlag = false;
    		$(".getMapWidth").click(function(){
        		if(mapFlag == true){
        			return false;
        		}
        		mapFlag = true;
        		
        		//测试用获取是否第一次点击li,不是则不重新加载
    			//alert(mapFlag +","+ $("#first-shadow-img").width());
    			
    			$("#myChart").width($("#first-shadow-img").width()-60);
    	    	//加载地图
        		var myChart4 = echarts.init(document.getElementById('myChart'));
        		
        	    myChart4.showLoading();
        	    
        	    window.onresize = function () {
        	    	 myChart4.resize();
    	    	};
        	    var loginacct = "${tUser.loginacct}";
        		var data ;
        		 $.ajax({
        			url:'/youu-restapi/usermain/data.json?loginacct='+loginacct,
        			dataType: 'json',
        			async:false,
        			contentType: "application/x-www-form-urlencoded; charset=utf-8",
        			success:function(data1){
        				data = data1;
        				console.log(data1);
        			},
        			error: function(XMLHttpRequest, textStatus, errorThrown) {
//                         alert(XMLHttpRequest.status);
//                         alert(XMLHttpRequest.readyState);
//                         alert(textStatus);
                    }

    		});
    		console.log(data);
    		
    		var geoCoordMap;
    		$.ajax({
    			url:'/youu-restapi/usermain/geoCoordMap.json?loginacct='+loginacct,
    			dataType: 'json',
    			async:false,
    			contentType: "application/x-www-form-urlencoded; charset=utf-8",
    			success:function(geoCoordMap1){
    				geoCoordMap = geoCoordMap1;
    				console.log(geoCoordMap1);
    				
    			},
    			error: function(XMLHttpRequest, textStatus, errorThrown) {
//                     alert(XMLHttpRequest.status);
//                     alert(XMLHttpRequest.readyState);
//                     alert(textStatus);
                },

    		});
    		console.log(geoCoordMap);
    		
    		
    		var initMap = function (data,geoCoordMap){

    			myChart4.hideLoading();
    			var convertData = function (data) {
    	           var res = [];
    	           for (var i = 0; i < data.length; i++) {
    	               var geoCoord = geoCoordMap[data[i].name];
    	               if (geoCoord) {
    	                   res.push({
    	                       name: data[i].name,
    	                       value: geoCoord.concat(data[i].value)
    	                   });
    	               }
    	           }
    	           return res;
    	       };
    	       
    	       option10 = {
    	           backgroundColor: '#404a59',
    	           title: {
    	               text: '我的足迹',
    	               subtext: '心之所向 素履以往 生如逆旅 一苇以航',
    	               left: 'center',
    	               textStyle: {
    	                   color: '#fff'
    	               }
    	           },
    	           tooltip : {
    	               trigger: 'item'
    	           },
    	           legend: {
    	               orient: 'vertical',
    	               y: 'bottom',
    	               x:'right',
    	               data:['旅游足迹'],//地图右下角坐标点全览
    	               textStyle: {
    	                   color: '#fff'
    	               }
    	           },
    	           geo: {
    	               map: 'china',
    	               label: {
    	                   emphasis: {
    	                       show: true,  //鼠标悬停显示省名称
    	                       textStyle:{
    	                    	   color:'#abcdef'
    	                       }
    	                   }
    	               },
    	               roam: false,  //鼠标悬停在图上时支持滚轮缩放与否
    	               itemStyle: {
    	                   normal: {
    	                       areaColor: '#323c48', //地图里中国的背景颜色
    	                       borderColor: '#111' //地图里中国各省边线颜色
    	                   },
    	                   emphasis: {
    	                       areaColor: '#2a333d'  //鼠标悬停在地图上各省高亮显示的颜色
    	                   }
    	               },
    	               zoom:1.2 //当前视角的缩放比例。
    	           },
    	           series : [
    	               {
    	                   name: '旅游足迹',
    	                   type: 'scatter', //分散
    	                   coordinateSystem: 'geo',	//坐标系统
    	                   data: convertData(data),
    	                   symbolSize: function (val) {
    	                       return val[2] / 10;
    	                   },
    	                   label: {
    	                       normal: {
    	                           formatter: '{b}',
    	                           position: 'right',
    	                           show: false
    	                       },
    	                       emphasis: {
    	                           show: true //鼠标放在右下角坐标点概览时地图中坐标点显示城市名与否
    	                       }
    	                   },
    	                   itemStyle: {
    	                       normal: {
    	                           color: '#ddb926'
    	                       }
    	                   }
    	               },
    	               {
    	                   name: '最近足迹',
    	                   type: 'effectScatter',  //产生分散
    	                   coordinateSystem: 'geo',
    	                   data: convertData(data.sort(function (a, b){
    	                       return b.value - a.value;	//遍历数据，选前三个作为此设置子项
    	                   }).slice(1, 3)),
    	                   symbolSize: function (val) {
    	                       return val[2] / 15;  //图形(圆圈)大小
    	                   },
    	                   showEffectOn: 'render',
    	                   rippleEffect: { //涟漪
    	                       brushType: 'stroke'
    	                   },
    	                   hoverAnimation: true,  //鼠标悬停动画
    	                   label: {
    	                       normal: {
    	                           formatter: '{b}',
    	                           position: 'right',
    	                           show: true
    	                       }
    	                   },
    	                   itemStyle: {
    	                       normal: {
    	                           color: '#f4e925',
    	                           shadowBlur: 10,
    	                           shadowColor: '#333'
    	                       }
    	                   },
    	                   zlevel: 1 //把不同的shape分别放在不同的层中，不仅实现了视觉的上下覆盖， 更当图形元素发生变化后的refresh将局限在发生了变化的图形层中
    	               },
    	               {
    	                   name: '当前位置',
    	                   type: 'effectScatter',  //产生分散
    	                   coordinateSystem: 'geo',
    	                   data: convertData(data.sort(function (a, b) {
    	                       return b.value - a.value;	//遍历数据，选前三个作为此设置子项
    	                   }).slice(0, 1)),
    	                   symbolSize: function (val) {
    	                       return val[2] / 8;  //图形(圆圈)大小
    	                   },
    	                   showEffectOn: 'render',
    	                   rippleEffect: { //涟漪
    	                       brushType: 'stroke'
    	                   },
    	                   hoverAnimation: true,  //鼠标悬停动画
    	                   label: {
    	                       normal: {
    	                           formatter: '{b}',
    	                           position: 'right',
    	                           show: true
    	                       }
    	                   },
    	                   itemStyle: {
    	                       normal: {
    	                           color: '#f4e925',
    	                           shadowBlur: 10,
    	                           shadowColor: '#333'
    	                       }
    	                   },
    	                   zlevel: 1
    	               }
    	           ]
    	       };
    	       myChart4.setOption(option10);
    	       };
    	       initMap(data,geoCoordMap);
    	       myChart4.setOption(option10);
    		});
    	});
    	
    </script>

    <script type="text/javascript" id="chenchen">
        //构建每行li
        function showBlogToUl(tabEle, data) {
            //显示之前先移除之前的数据
            tabEle.find("#blogList").empty();
            //表单中写数据；
//            console.log(data.list);
            $.each(data.list,function(index, blog) {

                var li = $("<li></li>").append(
                    "<h4>" + blog.userName + "<span class='year'>" + blog.blogDate + "</span></h4>"+
                    "<h5><a "+" href='javascript:showBlog("+blog.blogId+");'>" + blog.blogTitle + "</a>" +
                    "<span style='float: right;'>" +
                    "<button onclick='editUserBlog("+blog.blogId+")'>编辑</button>" +
                    "<button onclick=\"removeUserBlog("+blog.blogId+",'"+blog.blogTitle+"'"+")\">删除</button>" +
                    "</span></h5>");

                tabEle.find("#blogList").append(li);
            })
        }
        //显示博客列表
        function getMyBlog(pn) {

            $.ajax({
                url : "/youu-restapi/blog/showBlogList",
                type : "get",
                data : "userId=" + ${tUser.id}+"&pn="+pn,
                beforeSend : function() {
                    index = layer.load();
                },
                success : function(result) {
                    console.log(result);
                    //显示数据到页面上

                    showBlogToUl($("#tab-02"), result);
                    //显示分页条数据
                    $("#blogPage").empty();
                    buildPageLi(result);
                    //关闭
                    layer.close(index);
                }
            });
        }


        //构建分页条
        function buildPageLi(page) {

            var ulEle = $("#blogPage").addClass("pagination");
            //各种判断append
            //首页
            ulEle.append($("<li><a onclick='getMyBlog(1)'>首页</a></li>"));
            //上一页；都应该点击上一页发送ajax请求
            if (page.hasPreviousPage) {
                ulEle.append($("<li><a onclick='getMyBlog(" + page.prePage
                    + ")'>上一页</a></li>"));
            } else {
                ulEle.append($("<li><a>上一页</a></li>").addClass("disabled"));
            }
            //构造连续页面
            var ns = page.navigatepageNums;
            $.each(ns, function() {
                //判断当前页要加class="active"
                if (page.pageNum == this) {
                    ulEle.append($(
                        "<li><a id='currentPage' onclick='getMyBlog(" + this + ")'>"
                        + this + "</a></li>").addClass("active"));
                } else {
                    ulEle.append($("<li><a onclick='getMyBlog(" + this
                        + ")'>" + this + "</a></li>"));
                }

            })

            //下一页
            if (page.hasNextPage) {
                ulEle.append($("<li><a onclick='getMyBlog(" + page.nextPage
                    + ")'>下一页</a></li>"));
            } else {
                ulEle.append($("<li><a>下一页</a></li>").addClass("disabled"));
            }

            //末页
            //首页
            ulEle.append($("<li><a onclick='getAllAdver(" + page.pages
                + ")'>末页</a></li>"));

        }

        //显示博文
        function showBlog(blogid) {
            console.log("点击成功");
            var indexload = layer.load(0, {shade: false});
            console.log("博客id"+blogid);
            $.ajax({
                type:"post",
                data: "id=" + blogid,
                url:"/youu-restapi/blog/getBlog",
                success : function(data) {
                    layer.close(indexload);
                    console.log("data=" + data);
                    layer.open({
                        type: 2,
                        anim: 1,
                        title: '博文查看',
                        shadeClose: true,
                        shade: false,
                        area: ['71.8%', '100%'],
                        maxmin: true,
                        content: "/youu-restapi" + data, //iframe的url

                        btn: ['关闭'],
                        yes: function (index, layero) {
                            layer.close(index);
                        },

                    })
                },
                error:function(data) {
                    console.log(data);
                    alert("失败");
                }
            });

        };

        //编辑用户已存博文
        function editUserBlog(blogId) {
//            alert("++++"+ blogId);
            var blogid = blogId;
            $("#ueditor_status").val(false);
            $.ajax({
                type:"post",
                data:"blogId="+blogId,
                url:"/youu-restapi/blog/editUserBlog",
                success:function(data){

                    var blogTitle = data.blogTitle;
                    var userId = data.userId;
                    var userName = data.userName;
                    //console.log(userName);
                    var blogContent = data.blogContent;

                    layer.open({
                        type: 2,
                        anim:2,
                        title: "修改博文",
                        shadeClose: true,
                        shade: false,
                        area: ['71.8%', '100%'],
                        maxmin: true,
                        content: "EUditorUpload.jsp", //iframe的url

                        btn: ['确定修改','取消'],

                        success: function(layero, index){
                            //子父层通讯
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            //父层操作子层的保存方法
                            iframeWin.showBlogContent(blogContent);
                            iframeWin.showBlogInfo(blogTitle,userId,userName);
                        },
                        yes: function (index,layero) {
                            //子父层通讯
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            //父层操作子层的保存方法
                            iframeWin.editorExistBlog(blogid);
                        },
                        btn2: function () {
                            var flat = 1;
                        },
                        end:function () {
                           var ueditor_status = $("#ueditor_status").val();
                           console.log(ueditor_status);
                           if(ueditor_status == "true") {
                               getMyBlog(1);//加载用户博文列表
                               layer.msg('修改成功',{shade: 0.3});
                                $("#msg-div").empty();
                                getMsg(uid, 1);
                            }
                        }
                    });
                },
            });
        };

        //删除博文
        function removeUserBlog(blogId,blogTitle) {
            var blogid = blogId;
            layer.confirm("确定删除<span style='color: #c9302c'>"+blogTitle+"</span>吗？", {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.ajax({
                    type: "get",
                    data: "blogId=" + blogid,
                    url: "/youu-restapi/blog/removeBlog",
                    success: function (data) {
                        if (data==true){
                            var page = $("#currentPage").text();
                            //console.log(page);
                            getMyBlog(page);//加载用户博文列表
                            layer.msg("成功删除<span style='color: #c9302c'>"+blogTitle+"</span>", {icon: 1});
                            getMsg(uid,1);
                        }else {
                            layer.msg("删除失败", {icon: 1});
                        };
                    }
                });
            }, function(){

            });
        }

        // 消息通知
		$(function() {
			// 获取userid
			var uid = "${tUser.id}";
			// 是否有下一页
			var nextPage;
			//　未读消息数量
			var unreadCount;
			// 服务器的当前时间
			var nowDate;
			
			// 调用获取所有id的方法
			getMsg(uid, 1);
			// 单击消息条将消息改为已读
			$("body").on("click", ".msgStrip", function() {
				// 获取未读消息对象
				var msgLi = $(this);
				var content = msgLi.children("p[class='unread']");
				var msgid = content.attr("msgid");
				// 如果可以获取到msgid就发Ajax将该消息的状态改为已读
				if (msgid != null & msgid != undefined & msgid != '') { 
					// 点击后将消息隐藏，然后在显示实现一个动画效果
					content.hide("normal", function() {
						msgLi.children("div[class='newMsgDiv']").remove();
						unreadCount -= 1;
						insetCount();
						$(this).removeAttr("style");
						content.show("normal", function() {
							// 在消息显示后改变消息状态
							$.getJSON("/youu-restapi/message/update", {msgid: msgid}, function(result) {
								content.removeClass("unread");
								content.removeAttr("msgid");
							}); 
						});
					});
					} 
			});
			
			// 点击加载更多按钮插入更多数据loadMore
			$("body").on("click", "#loadMore", function() {
				if(nextPage !== 0) {
	    			getMsg(uid, nextPage);
				}
			});

			// 初始页面时获取所有消息
			function getMsg(uid, pn) {
				// 发Ajax获取所有消息通知
	    		$.ajax({
	    			url : "/youu-restapi/message/list",
	    			data : "uid="+uid+"&pn="+pn,
	    			async: false,
	    			success: function(result) {
	        			console.log(result.ext);
	        			nextPage = result.ext.msgPage.nextPage;
    					unreadCount = result.ext.unreadCount;
    					nowDate = result.ext.nowDate;
	        			if(nextPage == 0) {
	        				$("#loadDiv").empty().text("没有更多了！");
	        			} else {
	        				$("#loadDiv").empty().append("<div id='loadMore' style='width: 80px;height: 30px;margin: auto;font-size: 16px;background-color: #abcdef;padding-top: 3px;'><center><a href='#'>加载更多</a></center></div>");
	        			}
	        			// 判断查重结果
	    				if(result.code == 1) {
	    					// 调用方法将未读消息数量展示在页面上
	    					insetCount();
	    					// 调用方法将消息动态的插入到页面中
	    					insetMsg($("#msg-div"), result.ext.msgPage.list);
	    				}
	    			}
	    		});
			}
			
			function insetCount() {
				// 将未读消息的数量展示在msgCount-span中，先将msgCount-span中的数字清除
				$("#msgCount-span").empty();
				// 如果unreadCount大于0则表示有未读消息，并将未读数显示出来
				if(unreadCount > 0) {
					if(unreadCount > 9) {
						$("#msgCount-span").text("9+");
					} else {
						$("#msgCount-span").text(unreadCount);
					}
				}
			}
			
			// 将消息动态的插入到页面中
			function insetMsg(location, msgList) {
				$.each(msgList, function() {
					var li = $("<li class='msgStrip'></li>");
					// getDateDiff(this.date)工具方法中的计算时间差方法
					
					// 未读消息高亮显示
					if(this.status == 0) {
						li.append("<div class='newMsgDiv' style='color:red;'>新消息</div><span style='padding-top: 30px;' class='year'>" + getDateDiff(this.date, nowDate) + "</span><p msgid='"+ this.id +"' class='unread' style='color:white;'>" + this.msgContent + "</p>");
					} else {
		                li.append("<span style='padding-top: 30px;' class='year'>" + getDateDiff(this.date, nowDate) + "</span><p>" + this.msgContent + "</p>");
					}
					location.append(li);
				});
	    	}
			
			
			// 博文功能
	        $("#myBlog").click(function () {
	            getMyBlog(1);//加载用户博文列表
	        });
	
	        //打开Ueditor编辑器
	        $("#editBlog").click(function () {
	            $("#ueditor_status").val(false);
	            layer.open({
	                type: 2,
	                anim:3,
	                title: '编辑博文',
	                shadeClose: true,
	                shade: false,
	                area: ['71.8%', '100%'],
	                maxmin: true,
	                content: "EUditorUpload.jsp", //iframe的url
	
	                btn: ['提交','关闭'],
	                yes: function (index,layero) {
	                    //子父层通讯
	                    var iframeWin = window[layero.find('iframe')[0]['name']];
	                    //父层操作子层的保存方法
	                    iframeWin.saveBlog();
	
	                },
	                btn2: function () {
	
	                },
	                end:function () {
	                    var ueditor_status = $("#ueditor_status").val();
	                    if(ueditor_status == "true") {
                            layer.msg('博文创建成功！',{shade: 0.3});
	                    	$("#msg-div").empty();
	                    	getMsg(uid, 1);
	                    }
	                }
	            });
	        });



	        //构建每行li
	        function showBlogToUl(tabEle, data) {
	            //显示之前先移除之前的数据
	            tabEle.find("ul").empty();
	            //表单中写数据；
	            $.each(data,function() {

	                var li = $("<li></li>").append(
	                    "<h4>" + this.userName + "<span class='year'>" + this.blogDate + "</span></h4>"+
	                    "<h5><a "+" href='javascript:showBlog("+this.blogId+");'>" + this.blogTitle + "</a>" +
	                    "<span style='float: right;'>" +
                        "<button onclick='editUserBlog("+this.blogId+")'>编辑</button>" +
                        "<button onclick=\"removeUserBlog("+this.blogId+",'"+this.blogTitle+"'"+")\">删除</button>" +
                        "</span></h5>");

	                tabEle.find("ul").append(li);
	            })
	        }

	        window.onbeforeunload = onbeforeunload_handler;
	    	function onbeforeunload_handler() {
	    		var warning = "确认退出?";
	    		console.log(warning);
	    		
	    		$.ajax({
	    			url:"/youu-portal/toVerifyToken",
	    			success:function(data){
	    				console.log(data);
	    				if(data==0){
	    					window.location.href = "login.jsp";
	    				}
	    			},
	    			dataType : "json"
	    		});
	    		
	    	}
		});
    </script>
    <script type="text/javascript">
    	function test(){
    		$.ajax({
    			url:"/youu-portal/toVerifyToken",
    			success:function(data){
    				console.log(data);
    				if(data==0){
    					window.location.href = "login.jsp";
    				}
    			},
    			dataType : "json"
    		});
    	}
    	
    	$("body").everyTime("30s",test);
    </script>
</body>

<div>
    <input type="hidden" id="ueditor_status">
</div>


<%--<div id="edit_panal" style="display: none;">--%>

<%--</div>--%>

<%--<script>--%>
    <%--$("#edit_panal").load("EUditorUpload.jsp");--%>
<%--</script>--%>
</html>
